import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

// Register GSAP plugins
gsap.registerPlugin(ScrollTrigger)

// Animation presets for medical e-commerce
export const animations = {
  // Fade in animation for elements entering viewport
  fadeInUp: (element: Element | string, delay: number = 0) => {
    return gsap.fromTo(element, 
      {
        opacity: 0,
        y: 50,
        scale: 0.95
      },
      {
        opacity: 1,
        y: 0,
        scale: 1,
        duration: 0.8,
        delay,
        ease: "power2.out"
      }
    )
  },

  // Stagger animation for product grids
  staggerFadeIn: (elements: Element[] | string, options: { delay?: number, stagger?: number } = {}) => {
    const { delay = 0, stagger = 0.1 } = options
    return gsap.fromTo(elements,
      {
        opacity: 0,
        y: 30,
        scale: 0.9
      },
      {
        opacity: 1,
        y: 0,
        scale: 1,
        duration: 0.6,
        delay,
        stagger,
        ease: "power2.out"
      }
    )
  },

  // Product card hover animation
  productCardHover: (card: Element) => {
    const tl = gsap.timeline({ paused: true })
    
    tl.to(card, {
      y: -8,
      rotateX: 5,
      rotateY: 2,
      scale: 1.02,
      boxShadow: "0 20px 40px rgba(0,0,0,0.15)",
      duration: 0.3,
      ease: "power2.out"
    })
    .to(card.querySelector('.product-image img'), {
      scale: 1.1,
      duration: 0.3,
      ease: "power2.out"
    }, 0)
    .to(card.querySelector('.product-info'), {
      backgroundColor: "#fef7f0",
      duration: 0.3,
      ease: "power2.out"
    }, 0)

    return tl
  },

  // Price animation with medical theme
  priceAnimation: (element: Element | string) => {
    return gsap.fromTo(element,
      {
        scale: 0.8,
        opacity: 0,
        color: "#dc2626"
      },
      {
        scale: 1,
        opacity: 1,
        color: "#dc2626",
        duration: 0.5,
        ease: "back.out(1.7)"
      }
    )
  },

  // Medical cross loading animation
  medicalCrossLoading: (container: Element) => {
    const tl = gsap.timeline({ repeat: -1 })
    
    // Create cross elements if they don't exist
    if (!container.querySelector('.cross-horizontal')) {
      container.innerHTML = `
        <div class="cross-horizontal w-8 h-1 bg-red-500 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
        <div class="cross-vertical w-1 h-8 bg-red-500 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
      `
    }

    tl.to(container.querySelectorAll('.cross-horizontal, .cross-vertical'), {
      scaleX: 0,
      scaleY: 0,
      duration: 0.5,
      stagger: 0.1,
      ease: "power2.inOut"
    })
    .to(container.querySelectorAll('.cross-horizontal, .cross-vertical'), {
      scaleX: 1,
      scaleY: 1,
      duration: 0.5,
      stagger: 0.1,
      ease: "power2.inOut"
    })

    return tl
  },

  // Scroll-triggered animations
  scrollTriggerFadeIn: (element: Element | string, options: { trigger?: string, start?: string, end?: string } = {}) => {
    const { trigger, start = "top 80%", end = "bottom 20%" } = options
    
    return gsap.fromTo(element,
      {
        opacity: 0,
        y: 50
      },
      {
        opacity: 1,
        y: 0,
        duration: 1,
        ease: "power2.out",
        scrollTrigger: {
          trigger: trigger || element,
          start,
          end,
          toggleActions: "play none none reverse"
        }
      }
    )
  },

  // Floating animation for emphasis
  floatingAnimation: (element: Element | string) => {
    return gsap.to(element, {
      y: -10,
      duration: 2,
      repeat: -1,
      yoyo: true,
      ease: "power2.inOut"
    })
  },

  // Medical prescription badge animation
  prescriptionBadge: (badge: Element) => {
    const tl = gsap.timeline()
    
    tl.from(badge, {
      scale: 0,
      rotation: -180,
      duration: 0.6,
      ease: "back.out(1.7)"
    })
    .to(badge, {
      boxShadow: "0 0 20px rgba(78, 121, 243, 0.4)",
      duration: 0.3,
      ease: "power2.out"
    })

    return tl
  },

  // Quick navigation smooth reveal
  quickNavReveal: (nav: Element) => {
    return gsap.fromTo(nav,
      {
        x: -100,
        opacity: 0
      },
      {
        x: 0,
        opacity: 1,
        duration: 0.8,
        ease: "power3.out",
        delay: 1
      }
    )
  },

  // Sale badge pulse animation
  saleBadgePulse: (badge: Element) => {
    return gsap.to(badge, {
      scale: 1.1,
      duration: 1,
      repeat: -1,
      yoyo: true,
      ease: "power2.inOut"
    })
  }
}

// Utility functions
export const animationUtils = {
  // Create a master timeline for page animations
  createPageTimeline: () => {
    return gsap.timeline()
  },

  // Cleanup function for component unmount
  cleanup: (animation: gsap.core.Tween | gsap.core.Timeline) => {
    if (animation) {
      animation.kill()
    }
  },

  // Refresh ScrollTrigger (useful for dynamic content)
  refreshScrollTrigger: () => {
    ScrollTrigger.refresh()
  }
} 